<template>
  <view class="page">
    <nut-cell class="index">
      <nut-sticky class="sticky-container" top="0" :style="{ height: pageheight }" z-index="10000">
        <div class="stick_g">
          <view class="top_con justify-around align-center white-bg">
            <view class="dpr-center-sb px-1">
              <nut-searchbar
                v-model="searchabout.keyword"
                style="width: 100%"
                placeholder="搜索职位"
                input-background="#e9e9e9"
              >
                <template #leftin>
                  <nut-icon color="#505050" size="14" name="search2"></nut-icon>
                </template>
              </nut-searchbar>
            </view>
            <nut-button style="height: 32px; margin-right: 12px" plain type="primary" @click="toSearch"
              >搜索</nut-button
            >
          </view>
        </div>
      </nut-sticky>
    </nut-cell>
    <nut-row class="swiper_group">
      <nut-swiper
        :init-page="0"
        :loop="true"
        class="swiper-banner"
        auto-play="3000"
        height="150"
        style="height: 150px; border-radius: 10px"
      >
        <nut-swiper-item>
          <img width="370px" mode="widthFix" :src="girl" />
        </nut-swiper-item>
        <nut-swiper-item>
          <img width="370px" mode="widthFix" :src="boy" />
        </nut-swiper-item>
      </nut-swiper>
    </nut-row>
    <nut-cell class="swiper_group">
      <nut-tabs v-model="tab1value" @change="tabclick">
        <nut-tabpane title="全职">
          <proto-list :items="protoItems" @item-click="handleProtoClick" />
        </nut-tabpane>
        <nut-tabpane title="兼职">
          <proto-list :items="protoItems" @item-click="handleProtoClick" />
        </nut-tabpane>
        <nut-tabpane title="小时工">
          <proto-list :items="protoItems" @item-click="handleProtoClick" />
        </nut-tabpane>
      </nut-tabs>
      <!-- <nut-empty v-if="!protoListLoading && !protoTotal" description="暂无商品" style="background-color: #fff" />
      <view class="ma-3">
        <load-more-bottom
          v-if="protoItems && protoItems.length >= query.limit"
          class="scroll-load-more"
          :loading="moreLoading"
          :no-more="noMore"
        />
      </view> -->
    </nut-cell>
  </view>
</template>

<script setup lang="ts">
import '@/static/common.less';
import './index.less';
import { getCurrentInstance, ref, toRaw } from 'vue';
import Taro, {
  useLoad,
  usePullDownRefresh,
  useReachBottom,
  useShareAppMessage,
  useShareTimeline,
  useTitleClick,
} from '@tarojs/taro';
import { CategoryType, getCategoriesApi } from '@/api/categories';
import { loginapi } from '@/api/platform';
import { pagekeyword, typeshow, typekeykeyword } from '@/api/moredetail';
import girl from '@/assets/banner/girl.png';
import boy from '@/assets/banner/boy.png';

import ProtoList from '@/components/proto-list/index.vue';
// import LoadMoreBottom from '@/components/load-more-bottom/index.vue';
import { getProtoListApi, ProtoType } from '@/api/proto';
import SimpleTabs from '@/components/simple-tabs/index.vue';
const container2 = ref(null);
let savesearch = '';
let totalcount = 0;
// const windowInfo = Taro.getWindowInfo();
// const { proxy } = getCurrentInstance();
const query = ref({
  page: 1,
  limit: 6,
  category_id: '',
  sort_by: '',
  keywords: '',
});
const searchabout = ref({
  page: 0,
  count: 10,
  keyword: '',
});
const pageheight = ref('1000rpx');
const workarr = ref([]);
let typearr = ref([]);
// const scrollTop = ref(0);
// const protoListLoading = ref(false);
// const noMore = ref(true);
const categories = ref<CategoryType[]>([]);
const protoItems = ref<ProtoType[]>([]);
const tab1value = ref('0');
// const protoTotal = ref<number>(0);
// const sortType = ref([
//   { text: '默认排序', value: '' },
//   { text: '累计销量', value: 'sales' },
//   { text: '佣金比例', value: 'commission_ratio' },
// ]);
// const getCategories = () => {
//   categories.value = [];
//   categories.value.push({ id: '', name: '全部分类', icon: '' });
//   getCategoriesApi({}).then((res) => {
//     if (res.success) {
//       categories.value = categories.value.concat(res.result);
//     }
//   });
// };
const handleProtoClick = (proto: ProtoType) => {
  console.log(handleProtoClick);
};
const toSearch = () => {
  if (searchabout.value.keyword.trim().length == 0)
    return Taro.showToast({
      title: '请输入搜索内容',
      icon: 'loading',
      duration: 500,
    });
  // if(searchabout.value.keyword == savesearch) return
  // savesearch = searchabout.value.keyword
  searchabout.value.page = 1;
  protoItems.value = [];
  searchword();
};
const tabclick = (e) => {
  let obj = toRaw(e);
  let num = Number(e.paneKey) + 1;
  if (num == 3) {
    num = 4;
  }
  searchabout.value.page = 1;
  protoItems.value = [];
  searchword();
};
const searchtype = (num) => {
  typekeykeyword({ type: num }, { type: num, page: 0, count: 100 }).then((res: any) => {
    let { total, items } = res;
    totalcount = total;
    protoItems.value = protoItems.value.concat(items);
    var query = Taro.createSelectorQuery();
    //.box为指定类名高度
    query
      .select('.page')
      .boundingClientRect((res: any) => {
        pageheight.value = res?.height + 'px';
      })
      .exec();
  });
};
const searchword = () => {
  pagekeyword(searchabout.value).then((res: any) => {
    let { total, items } = res;
    totalcount = total;
    protoItems.value = protoItems.value.concat(items);
    var query = Taro.createSelectorQuery();
    //.box为指定类名高度
    query
      .select('.page')
      .boundingClientRect((res: any) => {
        pageheight.value = res?.height + 'px';
      })
      .exec();
  });
};
const loadMore = () => {
  searchabout.value.page++;
  searchword();
};
const getType = () => {
  typeshow().then((res: any) => {
    typearr.value = res;
  });
};
getType();
// const refreshLoading = ref(false);
// const getProtoList = () =>ut-sticky {
//   if (protoListLoading.value === true) {
//     return;
//   }
//   query.value.page = 1;
//   protoListLoading.value = true;
//   refreshLoading.value = true;
//   getProtoListApi(query.value)
//     .then((res) => {
//       if (res.success) {
//         protoItems.value = res.result.items;
//         protoTotal.value = res.result.total;
//         noMore.value = !res.result || !res.result.total || res.result.total < query.value.limit;
//       }
//     })
//     .finally(() => {
//       protoListLoading.value = false;
//       refreshLoading.value = false;
//     });
// };
// const moreLoading = ref(false);
// const loadMore = () => {
//   if (moreLoading.value || noMore.value) {
//     return;
//   }
//   moreLoading.value = true;
//   query.value.page += 1;
//   setTimeout(() => {
//     getProtoListApi(query.value)
//       .then((res) => {
//         if (res.success) {
//           if (res.result.items && res.result.items.length) {
//             protoItems.value = protoItems.value.concat(res.result.items);
//             protoTotal.value = res.result.total;
//             noMore.value = !res.result || !res.result.total || res.result.total < query.value.limit;
//           } else {
//             noMore.value = true;
//           }
//         }
//       })
//       .finally(() => {
//         moreLoading.value = false;
//       });
//   }, 100);
// };
// useShareAppMessage((res) => {
//   if (res.from === 'button') {
//     // 来自页面内转发按钮
//     console.log(res.target);
//   }
//   return {
//     title: '抖带选 - 抖音达人带货选品快速变现平台',
//   };
// });

// const handleTabClick = (tab) => {
//   console.log(tab);
//   if (!tab) {
//     return;
//   }
//   query.value.category_id = tab.id;
//   getProtoList();
// };
// useShareTimeline(() => {
//   console.log('分享朋友圈');
//   return {};
// });

// usePullDownRefresh(() => {
//   console.log('下拉');
//   setTimeout(() => {
//     getCategories();
//     getProtoList();
//     Taro.stopPullDownRefresh();
//   }, 300);
// });
// useTitleClick(() => {
//   console.log('标题点击');
// });
useReachBottom(() => {
  console.log('底部');
  loadMore();
});

useLoad(() => {
  searchword();
});
</script>
